<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>注册</title>
    <link rel="stylesheet" href="Tpl/css/bootstrap.min.css">
    <style type="text/css">
        .main{
            margin:100px auto;
        }
    </style>

</head>
<body>
      

     <div class="container main">
      <!-- Example row of columns -->
      <div class="col-md-12" style="margin-top:20px;">
        
        <form class="form-horizontal" action="zhuce.php" method="post">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="username" placeholder="用户名" name="username">
            </div>
            <!-- 这里是提示信息  是动态添加  默认是没有  触发不同事件才会触发不同提示结果 -->
            <p class="info"></p>
          </div>

          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
              <input type="email" class="form-control" id="email" name="email" placeholder="Email" >
            </div>
            <p class="info"></p>
          </div>

          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-4">
              <input type="password" class="form-control" id="password" name="password" placeholder="Password">
            </div>
            <p class="info"></p>
          </div>

          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-4">
              <input type="password" class="form-control" id="inputPassword3" name="passwords" placeholder="Password">
            </div>
            <p class="info"></p>
          </div>
          
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox">记住我
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-danger" value="注册">注册</button>
            </div>
          </div>
        </form>
      </div>

    <!-- 引jq -->
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        //当聚焦之后移开鼠标，出现提示信息
        $(function(){
            //用户名
            $('#username').blur(function(event) {
                //聚焦之后抓到输入的用户名
                username  = $(this).val();     //val()  取值
                //输入用户名名错误，要去Info下面追加用户名不合法，要抓到info  通过input  info就是input的父亲的兄弟  抓到的数据先用变量存起来
                objUser = $(this);
                //抓到数据之后发送异步给checkReg.php
                $.ajax({
                    url: 'checkReg.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {username: username},  //第一个参数代表下标   第二个参数代表要推进来的变量 上面通过$(this)抓到的用户名
                })
                .done(function(data) {
                    //判断之后，在这里执行返回的结果
                    //然后在这里可以把变量取出来做判断
                    if(data.error==1){
                        objUser.parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
                    }else{
                        objUser.parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
                    }
                })
                .fail(function() {
                    console.log("error");
                })                          
            });
            
            //邮箱
              $('#email').blur(function(event) {
                email = $(this).val();
                objEmail = $(this);
                $.ajax({
                    url: 'checkEmail.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {email: email},
                })
                .done(function(data) {
                    //判断之后，在这里执行返回的结果
                    //然后在这里可以把变量取出来做判断
                    if(data.error==1){
                       //加个勾勾  或者叉叉
                       objEmail.parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
                    }else{
                        objEmail.parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
                    }
                })
                .fail(function() {
                    console.log("error");

                })
            });
            
            
            //密码
            $('#password').blur(function(event) {
                //聚焦之后抓到输入的用户名
                password  = $(this).val();     //val()  取值
                //输入用户名名错误，要去Info下面追加用户名不合法，要抓到info  通过input  info就是input的父亲的兄弟  抓到的数据先用变量存起来
                objPsw = $(this);
                //抓到数据之后发送异步给checkReg.php
                $.ajax({
                    url: 'checkPsw.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {password: password},  //第一个参数代表下标   第二个参数代表要推进来的变量 上面通过$(this)抓到的密码
                })
                .done(function(data) {
                    //判断之后，在这里执行返回的结果
                    //然后在这里可以把变量取出来做判断
                    if(data.error==1){
                       //加个勾勾  或者叉叉
                       objPsw.parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
                    }else{
                        objPsw.parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
                    }
                })
                .fail(function() {
                    console.log("error");

                })
            });

            //确认密码
            $('#inputPassword3').blur(function(event) {
                //先抓取密码
                password =  $('#password').val();
                //再抓取当前密码    确认密码
                passwordre= $(this).val();
                //判断，比对，不一致不允许注册
                if(password ==passwordre){
                   $(this).parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+'密码一致');
                }else{
                    $(this).parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+'密码不一致');
                }

            });                   

        })


    </script>
     

</body>
</html>